<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
  <title>数据录入</title>
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="<%=path %>/js/jquery.js"></script>
	<script type="text/javascript" src="<%=path %>/js/data.js"></script>
	<script type="text/javascript" src="<%=path %>/js/ToastMessage.js"></script>
	<script type="text/javascript" src="<%=path %>/plugin/js/colorpicker.js"></script>
	<link rel="stylesheet" type="text/css" href="<%=path %>/css/data.css"/>
	<link rel="stylesheet" type="text/css" href="<%=path %>/plugin/css/colorpicker.css"/>
  </head>
   
  <body>
    	<div class="dataIo-div">
    		<div class="head-div">
    				<span id="currentInfo">当前第0行,第0列</span>
						类别:<select id="dataType"></select>
    				<a href="javascript:void(0);" class="save-button">保存</a>
    				<a href="javascript:void(0);" class="clean-button">清空</a>
    				<input type="checkbox" class="autoSave-box" checked="checked"/>自动保存
    				<input type="text" class="autoSave-text" id="autoSave-text" value="5"/>分钟
    				<a href="javascript:void(0);" class="fastcopy-button">快速复制</a>
    				<a href="javascript:void(0);" class="fastcopy-cancel-button">取消复制</a>
    				共<input type="text" id="dataCountsText" value="800"/>列
    				<a href="javascript:void(0);" class="endPoint">设置结束点</a>
    				<a href="javascript:void(0);" class="exportData">导出数据</a>
    				<a href="javascript:void(0);" class="colorset">颜色设置</a>
    				<a target="_blank" href="<%=path %>/system/dataType/list.v"  class="typeset">类别设置</a>
    				<input type="text" class="sortIndex" id="sortIndex"/>排序号
    		</div>
    		<div class="split-line"></div>
    		<div class="data-div">
    			
    		</div>
    		<div class="split-line"></div>
    		<a href="javascript:void(0);" class="refresh-view">刷新预览</a>
    		<div class="data-view">
    		</div>
    	</div>
    	<input type="hidden" id="updateId" value=""/>
    	<script type="text/javascript">
    	var nowDataView = true;
    		$(document).ready(function(){
				//创建1000个输入框
			  	var $this = this;
			  	for(var i=0;i<1000;i++){
				var input = $('<input type="text" class="data-element-input"/>');
				$(input).appendTo($(".data-div"));
			  	}
			  	
			  	//设置一个全局值
			  	var currentValue;
			  	//设置快速复制
			  	var fastcopy = false;
			  	//总行数
			  	var counts = $("#dataCountsText").val();
			  	//为每一个输入框添加事件
			  	$(".data-element-input").bind("focus",function(){
					$("#currentInfo").text("当前第1行,第"+($(this).index()+1)+"列");
					if($(this).val()==""&&currentValue!=null&&fastcopy)
					$(this).val(currentValue);
				}).bind("blur",function(){
					var val = $(this).val();
					if(val==null||val ==""){
						return;
					}
					var reg = /^[0-9]{1,2}$/;
					if(!reg.test(val)||val<0||val>32){
						alert("请输入32以内的整数");
						$(this).removeClass("dataComplete");
						$(this).val("");
						$(this).focus();
						return;
					}
					$(this).addClass("dataComplete");
					$("#currentRowsView span").eq($(this).index()).addClass('line'+$(this).val());
					
				}).bind("dblclick",function(){
					if($(this).val()!="")
					currentValue = $(this).val();
				}).eq(counts-1).addClass("endDiv");
				//快速复制
				$(".fastcopy-button").bind("click",function(){
					fastcopy =  true;
				});
				//取消快速复制
				$(".fastcopy-cancel-button").bind("click",function(){
					fastcopy =  false;
				});
				//清空
				$(".clean-button").bind("click",function(){
					if(confirm("数据将全部被清空，谨慎操作！！！")){
					$(".data-element-input").val("");
					$(".data-element-input").removeClass("dataComplete");
					$("#updateId").val('');
					$("#currentRowsView span").attr("class","data-element-span");
					}
				});
				//设置结束点
				$(".endPoint").bind("click",function(){
					counts = $("#dataCountsText").val();
					$(".data-element-input").removeClass("endDiv").eq(counts-1).addClass("endDiv");
				});
				//保存
				$(".save-button").bind("click",function(){
					var validate = true;
				//保存之前先验证
					$(".data-element-input").each(function(){
							var index = $(this).index();
							if(index>counts-1){
								return false;
						    }
						    if($(this).val()==""){
								alert("还有未填写的数据，请填写完整后提交");
								validate = false;
								return false;
							}
					});
					if(!validate)
						return;
					//new Toast({context:$('body'),message:'正在保存数据'}).show();
					//开始保存数据
					var dataArray = [];

					$(".data-element-input").each(function(){
						var index = $(this).index();
						if(index>counts-1){
							return false;
					    }
						dataArray.push($(this).val());
					});

					//判断是新建还是更新
					var dcId = $("#updateId").val();
					if(dcId!=null&&dcId!="")
						updateData(dataArray.join(','),dcId);
					else
						saveData(dataArray.join(','));
				});

				//刷新预览
				$(".refresh-view").bind("click",function(){
							loadViewData();
					});

				//颜色选择
				$(".colorset").ColorPicker({
					color: '#0000ff',
					onShow: function (colpkr) {
						$(colpkr).fadeIn(500);
						return false;
					},
					onHide: function (colpkr) {
						$(colpkr).fadeOut(500);
						return false;
					},
					onChange: function (hsb, hex, rgb) {

						}
				});
				loadDataType();
				var id = $("#dataType").val();
				loadViewData(id);
				changeDownloadUrl(id);

				//监听select变化事件
				$("#dataType").bind("change",function(){
					loadViewData($(this).val());
					changeDownloadUrl($(this).val());
					});
        });

    		//--------------------
    	//设置导出按钮的地址
    	function changeDownloadUrl(id){
						$(".exportData").attr("href","<%=path %>/system/data/download.v?dataType.id="+id);
      }
    		
			//载入类别
			function loadDataType(){
				 $.ajax({
						url: '<%=path %>/system/dc/loadType.v',
						type:'post',
						async: false,
						success: function(data){
								if(data!=null&&data.length>0){
											for(var i=0;i<data.length;i++){
														var dataType = data[i];
														var option = '<option value='+dataType.id+'>'+dataType.name+'</option>';
														$("#dataType").append(option);
											}
								}
						}
						});

				}
        	
				//载入预览数据
        	function loadViewData(id){
        	var id = $("#dataType").val();
					if(id==""){
						return;
					}
	        	$.ajax({
						url: '<%=path %>/system/dc/load.v',
						type:'post',
						data : 'dataType.id='+id,
						success: function(data){
						$(".data-view").empty();
							if(data!=null&&data.length>0){
								//将以前的清空
										for(var i=0;i<data.length;i++){
														var dataInfo = data[i];
														var datas = dataInfo.data;
														var $div = $('<div id='+dataInfo.id+'><a href="javascript:void(0);" class="view-toolbar">修改</a><a href="javascript:void(0);" class="view-toolbar">删除</a></div>');
														$div.prependTo($(".data-view"));
														$div.find("a").eq(0).bind("click",function(){
															var id = $(this).parent("div").attr("id");
																if(confirm("载入本条数据，将会覆盖上方已经填写是数据，是否继续？")){
																	toUpdate(id);
																}
														});
														$div.find("a").eq(1).bind("click",function(){
																if(confirm("删除本条数据后，将不能恢复，是否继续")){
																	deleteData($(this));
																}
														});
														if(datas!=null&&datas.length>0){
																		//分割
																		var dataArray = datas.split(",");
																		//迭代data
																		if(dataArray!=null&&dataArray.length>0){
																			for(var j=0;j<dataArray.length;j++){
																				var data_div = $('<span class="data-element-span line'+dataArray[j]+'" title="'+(j+1)+'">_</span>');
																				$(data_div).appendTo($div);
																				}
																		}
															}
														$('<a href="javascript:void(0);" id="'+dataInfo.sortIndex+'">序号</a>').appendTo($div).bind("click",function(){
																			alert($(this).attr("id"));
															});
											}
											if($("#currentRowsView").size()==0){
											var $div = $('<div id="currentRowsView"><a href="javascript:void(0);" class="view-toolbar">当前</a><a href="javascript:void(0);" class="view-toolbar">预览</a></div>');
										$div.prependTo($(".data-view"));
										//
										for(var j=0;j<800;j++){
											var data_div = $('<span class="data-element-span" title="'+(j+1)+'">_</span>');
											$(data_div).appendTo($div);
										}
										}
									}
									if($("#currentRowsView").size()==0){
											var $div = $('<div id="currentRowsView"><a href="javascript:void(0);" class="view-toolbar">当前</a><a href="javascript:void(0);" class="view-toolbar">预览</a></div>');
										$div.prependTo($(".data-view"));
										//
										for(var j=0;j<800;j++){
											var data_div = $('<span class="data-element-span" title="'+(j+1)+'">_</span>');
											$(data_div).appendTo($div);
										}
										}
						}
						});
          }
          //保存数据
          function saveData(datas){
        	  if(!confirm("保存该数据??"))
            	  return;  
					var id = $("#dataType").val();
						if(id==""){
							alert("请选择类别");
							return;
						}
					var sortIndex = $("#sortIndex").val();
					
          $.ajax({
						url: '<%=path %>/system/dc/save.v',
						type:'post',
						data : 'dataInfo.data='+datas+"&dataInfo.dataType.id="+id+"&dataInfo.sortIndex="+sortIndex,
						success: function(data){
							if(data=='success'){
										alert("保存成功");
										$("#sortIndex").val("");
								}
						}
						});
          }
          
          
          //删除数据
          function deleteData($this){
          	var id = $this.parent("div").attr("id");
          	$.ajax({
          	url : '<%=path %>/system/dc/delete.v',
          	type : 'post',
          	data : 'dataInfo.id ='+id,
          	success : function(data){
          		if(data=="success")
          		$this.parent("div").remove();
          	}
          	});
          }
          
          //载入更新数据
          function toUpdate(id){
	          $.ajax({
	          	url : '<%=path %>/system/dc/toUpdate.v',
	          	type : 'post',
	          	data : 'dataInfo.id ='+id,
	          	success : function(data){
	          	if(data==null||data.data==""){
	          		alert("获得该行数据失败");
	          		return;
	          	}
	          	//清空原有数据
          		$(".data-element-input").val("");
							$(".data-element-input").removeClass("dataComplete");
							//复制值
							var dataArray = data.data.split(",");
							for(var i=0;i<dataArray.length;i++){
								var datas = dataArray[i];
								$(".data-element-input").eq(i).addClass("dataComplete").val(datas);
							}
							$("#updateId").val(data.id);
							$("#sortIndex").val(data.sortIndex);
	          	}
	          	});
          }
          
          //更新数据
          function updateData(datas,id){
        	  if(!confirm("更新该数据??"))
            	  return;  
        	  var sortIndex = $("#sortIndex").val();
        	$.ajax({
					url: '<%=path %>/system/dc/update.v',
					type:'post',
					data : 'dataInfo.data='+datas+'&dataInfo.id='+id+"&dataInfo.sortIndex="+sortIndex,
					async: false,
					success: function(data){
						if(data=='success'){
									alert("更新成功");
									$("#sortIndex").val("");
									$("#updateId").val("");
							}
					}
					});
          }
    	</script>
  </body>
</html>
